<template>
  <el-row :gutter="20">
    <el-col :span="24">
      <el-col :span="8"
              class="button-same">
        <el-button type="primary"
                   size="medium"
                   class="el-icon-plus"
                   @click="onAdd">新增</el-button>
        <!-- <el-button size="medium" class="commit-style" @click="onSyn">同步</el-button> -->
      </el-col>
      <el-col :span="16">
        <el-form :model="formPro"
                 class="form-direction">
          <el-form-item label="创建日期:"
                        style="width:100%;"
                        label-width="100px"
                        size="medium">
            <el-date-picker v-model="timeArr"
                            type="daterange"
                            style="width:100%;"
                            @change="onChangeDate"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="合同名称:"
                        label-width="100px"
                        style="width:100%;"
                        size="medium">
            <el-input v-model="formPro.struct_type"
                      size="medium"
                      suffix-icon="el-icon-search"
                      placeholder="请输入"
                      @blur="onInputBlur"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-col>
    <el-col class="table-box">
      <el-table stripe
                style="width: 100%"
                :header-cell-style="{ background: '#f5f5f5' }"
                :data="tableData">
        <el-table-column type="index"
                         label="序号"
                         align="center"
                         width="100"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="专业类型"
                         prop="structTypeName"
                         align="center">
        </el-table-column>
        <el-table-column prop="contract_name"
                         label="合同名称"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="cop_num"
                         label="构件总数量"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="price"
                         label="市场价(元)"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="finish_time"
                         label="生产完成时间"
                         align="center"
                         show-overflow-tooltip>
          <template slot-scope="scope">
            {{(scope.row.finish_time||'').split(' ')[0]}}
          </template>
        </el-table-column>
        <el-table-column prop="add_time"
                         label="创建日期"
                         align="center"
                         show-overflow-tooltip>
          <template slot-scope="scope">
            {{(scope.row.add_time||'').split(' ')[0]}}
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         width="200px"
                         align="center">
          <template slot-scope="scope">
            <el-button type="text"
                       @click="onLook(scope.row)">查看</el-button>
            <el-button type="text"
                       @click="onEdit(scope.row)">修改</el-button>
            <!-- <el-button type="text"  @click="onDetail(scope.row)">明细</el-button> -->
            <el-button type="text"
                       @click="onDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="24"
            style="margin-top:20px!important;">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="page"
                     :page-sizes="[10, 20, 50, 100,200]"
                     :page-size="page_size"
                     align="center"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-col>
    <!-- 查看 -->
    <el-dialog :title="todos==1?'新增构件生产信息':todos==2?'修改构件生产信息':'查看构件生产信息'"
               :visible.sync="dialogVisiblePro"
               width="45%"
               :before-close="handleClose">
      <AddOrEditComProInfoDialog :todos="todos"
                                 :catchBack="catchBack"
                                 :catchSave="catchSave"
                                 :detailObj="detailObj"></AddOrEditComProInfoDialog>
    </el-dialog>
    <!-- 查看 -->
    <el-dialog title="明细"
               :visible.sync="dialogVisibleDetailed"
               width="45%"
               :before-close="handleClose">
      <DetailedDialog :todosDetailed="todosDetailed"
                      :catchBackDetailed="catchBackDetailed"
                      :catchSaveDetailed="catchSaveDetailed"
                      :detailObjDetailed="detailObjDetailed"></DetailedDialog>
    </el-dialog>
  </el-row>
</template>

<script>
import AddOrEditComProInfoDialog from './addOrEditComProInfoDialog'
import DetailedDialog from './detailedDialog'
import { ProductManageApi } from '@/services/WorkCenter'
import { standardCodeApi } from '@/services/StandardCode'
export default {
  components: {
    AddOrEditComProInfoDialog,
    DetailedDialog
  },
  data () {
    return {
      contractArr: [],
      detailObjDetailed: {},
      todosDetailed: 0,
      dialogVisibleDetailed: false,
      structArr: [],
      detailObj: {},
      todos: 0,
      timeArr: null,
      dialogVisiblePro: false,
      formPro: {
        struct_type: '',
        start_time: '',
        end_time: ''
      },
      tableData: [],
      total: 0,
      page: 1,
      page_size: 10
    }
  },
  methods: {
    //日期改变时触发的事件
    onChangeDate (val) {
      this.formPro.start_time = this.timeArr == null ? '' : this.timeArr[0];
      this.formPro.end_time = this.timeArr == null ? '' : this.timeArr[1];
      this.handleCurrentChange(1);
    },
    getProductOrderData () {//订单列表数据
      return ProductManageApi.getProductOrderData({
        params: {
          is_page: 0,//不分页下拉
        }
      }).then((res) => {
        this.contractArr = [];
        this.contractArr = res.data.list;
      }).catch((error) => {
        console.log(error)
      })
    },
    //明细-保存
    catchSaveDetailed () {
      this.catchBackDetailed();
    },
    //明细-返回
    catchBackDetailed () {
      this.detailObjDetailed = {};
      this.todosDetailed = 0;
      this.dialogVisibleDetailed = false;
    },
    //明细
    onDetail (row) {
      this.todosDetailed = 1;
      this.detailObjDetailed = row;
      this.detailObjDetailed.judgeType = 1;//1:构件生产信息;2:/施工项目;3:构件施工项目
      this.dialogVisibleDetailed = true
    },
    // 获取标准码
    getStardandCode () {
      return standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'jtStructName'
        }
      }).then((res) => {
        this.structArr = res.data.list
      }).catch((error) => {
        console.log(error)
      })
    },
    //失去焦点触发的事件
    onInputBlur () {
      this.handleCurrentChange(1)
    },
    onSyn () {
      this.$message('同步')
    },
    //点击取消时子组件触发事件
    catchBack () {
      this.detailObj = {};
      this.todos = 0;
      this.dialogVisiblePro = false;
    },
    //点击确定时子组件触发事件
    catchSave () {
      this.handleCurrentChange(1)
      this.catchBack();
    },
    //新增
    onAdd () {
      this.todos = 1;
      this.dialogVisiblePro = true;
    },
    //查看
    onLook (row) {
      this.detailObj = row;
      this.todos = 3;
      this.dialogVisiblePro = true;
    },
    //编辑
    onEdit (row) {
      this.detailObj = row;
      this.todos = 2;
      this.dialogVisiblePro = true;
    },
    //删除
    onDel (row) {
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        left: true
      }).then(() => {
        ProductManageApi.delComponent({
          data: {
            id: row.cop_id
          }
        }).then((res) => {
          if (res.code == 0) {
            this.handleCurrentChange(1)
            this.$message.success('操作成功')
          }
        }).catch((error) => {
          console.log(error)
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleClose (done) {
      this.todosDetailed = 0;
      this.detailObjDetailed = {};
      this.dialogVisibleDetailed = false;
      this.catchBack();
      done();
    },
    //每页显示的条数
    handleSizeChange (val) {
      this.page_size = val;
      this.handleCurrentChange(1);
    },
    //当前页变化时触发的事件
    handleCurrentChange (val) {
      this.page = val;
      this.getCompList();
    },
    getCompList () {//获取列数数据
      return ProductManageApi.getCompList({
        params: {
          // business_type:'2',
          contract_name: this.formPro.struct_type,
          is_page: 1,
          page: this.page,
          page_size: this.page_size,
          start_time: this.formPro.start_time,
          end_time: this.formPro.end_time
        }
      }).then((res) => {
        this.tableData = res.data.list;
        if (this.tableData.length > 0) {
          this.tableData.forEach(ele => {//获取合同名称
            this.contractArr.forEach(ele1 => {
              if (ele.order_id == ele1.order_id) {
                this.$set(ele, 'contract_name', ele1.contract_name)
              }
            })
          });
          this.tableData.forEach(ele => {//构件名称
            this.structArr.forEach(ele1 => {
              if (ele.struct_type == ele1.value) {
                this.$set(ele, 'structTypeName', ele1.name)
              }
            })
          })
        }
        console.log('tableData=', this.tableData)
        this.total = res.data.total_count;
      }).catch((error) => {
        console.log(error)
      })
    }
  },
  async created () {
    await this.getProductOrderData();//合同名称
    await this.getStardandCode();//标准码获取类型
    await this.getCompList();//获取列表数据
  }
}
</script>

<style lang="scss" scoped>
.button-same {
  padding-left: 0px !important;
  // margin-bottom:22px;
}
// /deep/ .el-dialog__body{
//   padding-top:10px!important;
// }
.form-direction {
  display: flex;
  flex-direction: row;
}
.commit-style {
  margin-left: 20px;
}
</style>